<template>
	<view class="content">
		<view class="tab_type">
			<view class="tabs" :class="{selected: type == 0}" @tap="changeType(0)">招聘</view>
			<view class="tabs" :class="{selected: type == 1}" @tap="changeType(1)">求职</view>
			<view class="tabs " :class="{selected: type == 2}" @tap="changeType(2)">房源</view>
		</view>
		<view class="tab_box">
			<view class="tab_box_style">
				<view class="tab_box_inner" :class="{active: istab == 6}" @tap="setTab(6)">已上架</view>
				<view class="tab_box_inner" :class="{active: istab == 7}" @tap="setTab(7)">已下架</view>
			</view>
		</view>
		<view v-if="istab == 6">
			<view class="hlist" v-for="(house,index) in houseList" @tap="toDetail" :data-id="house.id" key="index" v-if="house.state == 6 && type == 2">
				<view class="hlist_inner" >
					<view class="hlist_img">
						<image class="hlist_img_inner" v-if="house.img" :src="house.img.split(',')[0]" mode=""></image>
						<view class="hlist_img_inner1"></view>
					</view>
					<view class="hlist_right">
						<view class="hlist_title">
							<text v-if="house.typeId == 1">住宅</text>
							<text v-if="house.typeId == 2">店铺</text>
							<text v-if="house.typeId == 3">厂房</text>
							<text v-if="house.typeId == 4">仓库</text>
							<text v-if="house.typeId == 1">-{{house.addCopIdName}}</text>
							-{{house.buildingName}}
							<text v-if="house.typeId == 1 && house.shiCount && house.tingCount && house.wei">-{{house.shiCount}}室{{house.tingCount}}厅{{house.wei}}卫</text>
						</view>
						<view class="hlist_title" style="margin-top: 5rpx;">{{house.area}}㎡</view>
						<view class="hlist_position">{{house.address}}</view>
						<view class="hlist_tag" v-if="house.highlights">
							<view class="hlist_tag_inner" v-for="(item,index) in house.highLightArr" :key="index">{{item}}</view>
						</view>
						<view class="hlist_price" v-if="house.unitPrice">￥{{house.unitPrice}}/月</view>
						<view class="hlist_price" v-else>价格:面谈</view>
					</view>
				</view>
				<view class="hlist_btn">
					<view class="hlist_btn_inner" @tap.stop="toPublish" :data-id="house.id">修改</view>
					<view class="hlist_btn_inner" @tap.stop="xiajia" :data-id="house.id" style="background: #007AFF;color: #ffffff;border: none;">下架</view>
					<view class="hlist_btn_inner"
					 v-if="String(house.stick) !== '0'" 
					 @tap.stop="toTop" 
					 :data-id="house.id" 
					 :data-type="type" 
					 style="background: #007AFF;color: #ffffff;border: none;">置顶</view>
					<view class="hlist_btn_inner" v-else style="background: #cccccc;color: #ffffff;border: none;width: 120rpx;">已置顶</view>
					<view class="hlist_btn_inner" 
					@tap.stop="formSubmit1" 
					:data-item="house"
					style="background: #19BE6B;color: #ffffff;border: none;width: 150rpx;">生成海报</view>
					<!-- :data-id="house.id"
					:data-unitPrice="house.unitPrice" 
					:data-buildingName="house.buildingName" 
					:data-area="house.area" -->
					<view class="hlist_btn_inner" style="background: #FF0000;color: #ffffff;border: none;" @tap.stop="deleteBtn" :data-id="house.id">删除</view>
				</view>
			</view>
			<!-- 求职招聘 -->
			<view class="hlist" v-for="(house,index) in houseList" key="index" v-if="house.state == 6 && type != 2" @tap="toDetail1" :data-id="house.id">
				<view class="hlist_inner" >
					<view class="hlist_img" v-if="house.img">
						<image class="hlist_img_inner" v-if="house.img" :src="house.img.split(',')[0]" mode=""></image>
						<view class="hlist_img_inner1"></view>
					</view>
					<view class="hlist_right">
						<view class="hlist_title">
							{{house.contents}}
						</view>
						<!-- <view class="hlist_title" style="margin-top: 5rpx;">区域：{{house.areaCode}}</view> -->
						<view class="hlist_position" style="margin-top: 5rpx;">姓名：{{house.customerName}}</view>
						<view class="hlist_position">电话号码：{{house.mobile}}</view>
						<view class="hlist_position">微信：{{house.customerWechat}}</view>
						<view class="hlist_tag" v-if="house.highlights">
							<view class="hlist_tag_inner" v-for="(item,index) in house.highlights.split(',')" :key="index">{{item}}</view>
						</view>
					</view>
				</view>
				<view class="hlist_btn">
					<view class="hlist_btn_inner" @tap.stop="toPublish" :data-id="house.id">修改</view>
					<view class="hlist_btn_inner" @tap.stop="xiajia1" :data-id="house.id" style="background: #007AFF;color: #ffffff;border: none;">下架</view>
					<view class="hlist_btn_inner"
					 @tap.stop="toTop" 
					 v-if="String(house.stick) !== '0'" 
					 :data-id="house.id" 
					 :data-type="type" 
					 style="background: #007AFF;color: #ffffff;border: none;">置顶</view>
					<view class="hlist_btn_inner" v-else style="background: #cccccc;color: #ffffff;border: none;width: 120rpx;">已置顶</view>
					<view class="hlist_btn_inner" 
					v-if="type == 0" 
					@tap.stop="formSubmit" 
					:data-id="house.id" 
					:data-salary="house.salary" 
					:data-post="house.post" 
					style="background: #19BE6B;color: #ffffff;border: none;width: 150rpx;">生成海报</view>
					<view class="hlist_btn_inner" style="background: #FF0000;color: #ffffff;border: none;" @tap.stop="deleteBtn1" :data-id="house.id">删除</view>
				</view>
			</view>
		</view>
		<view v-if="istab == 7">
			<view class="hlist" v-for="(house,index) in houseList" key="index" v-if="house.state == 7 && type == 2">
				<view class="hlist_inner" >
					<view class="hlist_img">
						<image class="hlist_img_inner" v-if="house.img" :src="house.img.split(',')[0]" mode=""></image>
						<view class="hlist_img_inner1"></view>
					</view>
					<view class="hlist_right">
					 <view class="hlist_title">
						<text v-if="house.typeId == 1">住宅</text>
						<text v-if="house.typeId == 2">店铺</text>
						<text v-if="house.typeId == 3">厂房</text>
						<text v-if="house.typeId == 4">仓库</text>
						<text>-{{house.addCopIdName}}</text>
						-{{house.buildingName}}
						<text v-if="house.typeId == 1 && house.shiCount && house.tingCount && house.wei">-{{house.shiCount}}室{{house.tingCount}}厅{{house.wei}}卫</text></view>
						<view class="hlist_title" style="margin-top: 5rpx;">{{house.area}}㎡</view>
						<view class="hlist_position">{{house.address}}</view>
						<view class="hlist_tag" v-if="house.highlights">
							<view class="hlist_tag_inner" v-for="(item,index) in house.highLightArr" :key="index">{{item}}</view>
						</view>
						<view class="hlist_price" v-if="house.unitPrice">￥{{house.unitPrice}}/月</view>
						<view class="hlist_price" v-else>价格:面谈</view>
					</view>
				</view>
				<view class="hlist_btn">
					<view class="hlist_btn_inner" @tap.stop="toPublish" :data-id="house.id">修改</view>
					<view class="hlist_btn_inner" @tap.stop="shangjia" :data-id="house.id" style="background: #007AFF;color: #ffffff;border: none;">上架</view>
					<view class="hlist_btn_inner" style="background: #FF0000;color: #ffffff;border: none;" @tap.stop="deleteBtn" :data-id="house.id">删除</view>
				</view>
			</view>
			<!-- 求职招聘 -->
			<view class="hlist" v-for="(house,index) in houseList" key="index" v-if="house.state == 7 && type != 2">
				<view class="hlist_inner" >
					<view class="hlist_img" v-if="house.img">
						<image class="hlist_img_inner" v-if="house.img" :src="house.img.split(',')[0]" mode=""></image>
						<view class="hlist_img_inner1"></view>
					</view>
					<view class="hlist_right">
						<view class="hlist_title">
							{{house.contents}}
						</view>
						<!-- <view class="hlist_title" style="margin-top: 5rpx;">区域：{{house.areaCode}}</view> -->
						<view class="hlist_position" style="margin-top: 5rpx;">姓名：{{house.customerName}}</view>
						<view class="hlist_position">电话号码：{{house.mobile}}</view>
						<view class="hlist_position">微信：{{house.customerWechat}}</view>
						<view class="hlist_tag" v-if="house.highlights">
							<view class="hlist_tag_inner" v-for="(item,index) in house.highlights.split(',')" :key="index">{{item}}</view>
						</view>
					</view>
				</view>
				<view class="hlist_btn">
					<view class="hlist_btn_inner" @tap.stop="toPublish" :data-id="house.id">修改</view>
					<view class="hlist_btn_inner" @tap.stop="shangjia1" :data-id="house.id" style="background: #007AFF;color: #ffffff;border: none;">上架</view>
					<view class="hlist_btn_inner" style="background: #FF0000;color: #ffffff;border: none;" @tap.stop="deleteBtn1" :data-id="house.id">删除</view>
				</view>
			</view>
		</view>
		
		<!-- 海报 -->
		<view class="posters" v-if="isPoster">
			<view class="posters_layer">
				<view class="canvas-box">
					<canvas class="canvas-inner" canvas-id="mycanvas"/>
				</view>	
				<view class="poster_btn">
					<view @tap="isPoster = false" class="poster_cancel">取消</view>
					<view @tap="saveImg" class="poster_cancel sure_btn">保存到相册</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	var _self,timer = null;
	export default {
		data() {
			return {
				type: 0,
				innertype: 1,
				istab: 6,
				houseList: [],
				highlightAll: [],
				pageNum: 1,
				pageSize: 20,
				nodata: false,
				payArr: [],
				isPoster: false
			}
		},
		onLoad(option) {
			if(option.type != undefined){
				this.type = option.type
			}
			this.getSelect("bright_points")
			this.getSelect("leasing_mode")
		},
		onPullDownRefresh() {
			let that = this
			that.pageNum = 1
			if(that.type == 2){
				that.getList()
			}else{
				that.getList2(that.type)
			}
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			formSubmit1: function(e){
				let item = e.currentTarget.dataset.item
				let id = item.id
				// let unitPrice = item.unitPrice ? item.unitPrice + "元/月" : "面谈"
				let unitPrice
				if(item.unitPrice == "undefined" || item.unitPrice == null || item.unitPrice == 0){
					unitPrice = "面谈"
				}else{
					unitPrice = item.unitPrice + "元/月"
				}
				let buildingName = item.buildingName
				let area = item.area + "平米"
				var that = this;
				that.isPoster = true
				uni.showLoading({
				    title: '海报生成中...'
				});
				var context = wx.createCanvasContext('mycanvas');
				var path = '../../static/img/poster_bg1.jpg'
				context.drawImage(path,0,0,350,550);
				context.font = "30px bold FangSong";
				context.fillStyle = "#DB4200";
				context.textAlign = "center";
				context.textBaseline = "middle";
				if (buildingName.length > 8){ 
					context.fillText(buildingName.substring(0,8),180,250)
					context.fillText(buildingName.substring(8,buildingName.length),180,290)
				}else{
					context.fillText(buildingName, 180, 290);
				}
				context.fillText("面积: "+ area, 180, 340);
				context.fillText("价格: "+ unitPrice, 180, 390);
				let submitId = that.detailId || "00000000"
				uni.request({
					url: "https://zlzfcloud.xyz/api/weixinCode/getCode",
					method: 'POST',
					responseType: 'arraybuffer',
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
				    },
					data: {
						param: submitId,
						page: 'pages/jobDetail/jobDetail'
					},
					success: (res) => {
						console.log(res)
						let src = wx.arrayBufferToBase64(res.data);
						let src2 = 'data:image/png;base64,' + src
						const fs = wx.getFileSystemManager();
						//随机定义路径名称
						var times = new Date().getTime();
						var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';
						console.log("codeimg",codeimg)
						fs.writeFile({
							filePath: codeimg,
							data: src2.slice(22),
							encoding: 'base64',
							success: (rrr) => {
							  console.log("rrr",rrr)
							  context.drawImage(codeimg,130,420,100,100);
							  context.draw();
							  uni.hideLoading()
							},
							fail: (err) =>{
								console.log("err",err)
							}
						});
					},
				})
			},
			formSubmit: function(e){
				let id = e.currentTarget.dataset.id
				// let salary = e.currentTarget.dataset.salary ? e.currentTarget.dataset.salary + "元/月" : "面谈"
				let salary
				if(e.currentTarget.dataset.salary == "undefined" || e.currentTarget.dataset.salary == null){
					salary = "面谈"
				}else{
					salary = e.currentTarget.dataset.salary + "元/月"
				}
				let post = e.currentTarget.dataset.post
				var that = this;
				that.isPoster = true
				uni.showLoading({
				    title: '海报生成中...'
				});
				var context = wx.createCanvasContext('mycanvas');
				var path = '../../static/img/poster_bg.jpg'
				context.drawImage(path,0,0,350,550);
				context.font = "30px bold FangSong";
				context.fillStyle = "#1E3980";
				context.textAlign = "center";
				context.textBaseline = "middle";
				context.fillText("岗位: "+ post, 180, 290);
				context.fillText("薪资: "+ salary, 180, 350);
				let submitId = that.detailId || "00000000"
				uni.request({
					url: "https://zlzfcloud.xyz/api/weixinCode/getCode",
					method: 'POST',
					responseType: 'arraybuffer',
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
				    },
					data: {
						param: submitId,
						page: 'pages/jobDetail/jobDetail'
					},
					success: (res) => {
						console.log(res)
						let src = wx.arrayBufferToBase64(res.data);
						let src2 = 'data:image/png;base64,' + src
						const fs = wx.getFileSystemManager();
						//随机定义路径名称
						var times = new Date().getTime();
						var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';
						console.log("codeimg",codeimg)
						fs.writeFile({
							filePath: codeimg,
							data: src2.slice(22),
							encoding: 'base64',
							success: (rrr) => {
							  console.log("rrr",rrr)
							  context.drawImage(codeimg,130,400,100,100);
							  context.draw();
							  uni.hideLoading()
							},
							fail: (err) =>{
								console.log("err",err)
							}
						});
					},
				})
			},
			saveImg(){
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					height: 550,
					width: 350,
					canvasId: 'mycanvas',
					success: (response) => {
						uni.saveImageToPhotosAlbum({
							filePath: response.tempFilePath,
							success: (response) => {
							 console.log(response);
							 uni.showModal({
							 	title: '提示',
							 	content: '图片保存成功！',
							 	showCancel: false
							 })
							 this.isPoster = false
							},
							fail: (response) => {
							 uni.openSetting({
								success: (response) => {
								}
							 })
							}
						})
					},
					fail: (response) => {
						console.log(response);
					}
				}, this); 
			},
			changeType(type){
				let that = this
				that.type = type
				if(type == 2){
					that.getList()
				}else{
					that.getList2(type)
				}
			},
			//获取招聘求职列表
			getList2(type){
				let that = this
				that.$api.request('/api/recruitmentjob/list','',{
					addUserid: uni.getStorageSync("userId"),
					pageNum: 1,
					pageSize: 100,
					type: type
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					if(that.pageNum == 1){
						that.houseList = res.rows
					}else{
						res.rows.forEach((item,index) =>{
							that.houseList.push(item)
						})
					}
					if(res.rows.length == 0){
						that.nodata = true
					}else{
						that.nodata = false
					}
				})
			},
			//上架
			shangjia(event){
				console.log(event.currentTarget.dataset.id)
				let that = this;
				that.$api.request('/api/web/grounding','',{
					rentItemId: event.currentTarget.dataset.id,
					addUserid: uni.getStorageSync("userId"),
					type: 0,
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					uni.showToast({
						title: "上架成功！"
					});
					this.getList()
				})
			},
			//上架
			shangjia1(event){
				console.log(event.currentTarget.dataset.id)
				let that = this;
				let thisType
				if(that.type == 1){ //求职
					thisType = 2
				}else if(that.type == 0){ //招聘
					thisType = 1
				}
				that.$api.request('/api/web/grounding','',{
					recruitMentJobId: event.currentTarget.dataset.id,
					addUserid: uni.getStorageSync("userId"),
					type: thisType,
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					uni.showToast({
						title: "上架成功！"
					});
					that.getList2(that.type)
				})
			},
			//下架
			xiajia(event){
				console.log(event.currentTarget.dataset.id)
				let that = this;
				that.$api.request('/api/web/off','',{
					rentItemId: event.currentTarget.dataset.id,
					addUserid: uni.getStorageSync("userId"),
					type: 0,
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					uni.showToast({
						title: "下架成功！"
					});
					this.getList()
				})
			},
			xiajia1(event){
				console.log(event.currentTarget.dataset.id)
				let that = this;
				let thisType
				if(that.type == 1){ //求职
					thisType = 2
				}else if(that.type == 0){ //招聘
					thisType = 1
				}
				that.$api.request('/api/web/off','',{
					recruitMentJobId: event.currentTarget.dataset.id,
					addUserid: uni.getStorageSync("userId"),
					type: thisType,
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					uni.showToast({
						title: "下架成功！"
					});
					that.getList2(that.type)
				})
			},
			//删除房源
			deleteBtn(event){
				let that = this;
				uni.showModal({
				  title: '提示',
				  content: '确认删除此信息？',
				  cancelText: "取消",
				  confirmText: "确定",
				  success: function (res) {
					if (res.confirm) {
					 that.$api.request('/api/web/delhouse','',{
					 	id: event.currentTarget.dataset.id
					 }, failres => {
					 	uni.showToast({
					 		title: failres.msg,
					 		icon: "none"
					 	});
					 }).then(res => {
					 	uni.showToast({
					 		title: "删除成功！"
					 	});
					 	if(that.type == 2){
					 		that.getList()
					 	}else{
					 		that.getList2(that.type)
					 	}
					 })
					} else if (res.cancel) {
					  console.log('用户点击取消');
					}
				  }
				});
			},
			//删除招工
			deleteBtn1(event){
				let that = this;
				uni.showModal({
					  title: '提示',
					  content: '确认删除此信息？',
					  cancelText: "取消",
					  confirmText: "确定",
					  success: function (res) {
						if (res.confirm) {
						 that.$api.request('/api/recruitmentjob/remove','',{
						 	ids: event.currentTarget.dataset.id
						 }, failres => {
						 	uni.showToast({
						 		title: failres.msg,
						 		icon: "none"
						 	});
						 }).then(res => {
						 	uni.showToast({
						 		title: "删除成功！"
						 	});
						 	if(that.type == 2){
						 		that.getList()
						 	}else{
						 		that.getList2(that.type)
						 	}
						 })
						} else if (res.cancel) {
						  console.log('用户点击取消');
						}
					  }
				});
			},
			setTab(index){
				this.istab = index
			},
			//获取亮点
			getSelect(type){
				let that = this;
				that.$api.request('/api/dict/data/list','',{
					dictType: type
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					if(type == "bright_points"){
						that.highlightAll = res.rows
					}else if(type == "leasing_mode"){
						that.payArr = res.rows
					}
					if(that.type == 2){
						that.getList()
					}else{
						that.getList2(that.type)
					}
				})
			},
			toDetail(event){
				uni.navigateTo({
					url: '../houseDetail/houseDetail?id=' + event.currentTarget.dataset.id
				})
			},
			toDetail1(event){
				uni.navigateTo({
					url: '../jobDetail/jobDetail?id=' + event.currentTarget.dataset.id
				})
			},
			toPublish(event){
				uni.setStorageSync('updateId',event.currentTarget.dataset.id)
				if(this.type == 2){
					uni.navigateTo({
						url: '../publish/publish'
					})
				}else if(this.type == 1){
					uni.navigateTo({
						url: "../publishApplyJob/publishApplyJob?id=" + event.currentTarget.dataset.id
					})
				}else if(this.type == 0){
					uni.navigateTo({
						url: "../publishZhaopin/publishZhaopin?id=" + event.currentTarget.dataset.id
					})
				}
			},
			toTop(event){
				let id = event.currentTarget.dataset.id
				let type = event.currentTarget.dataset.type
				uni.navigateTo({
					url: '../top/top?id=' + id + "&type=" + type
				})
			},
			//获取房源列表
			getList(){
				let that = this;
				that.$api.request('/api/web/housingList','',{
					addUserid: uni.getStorageSync("userId"),
					pageNum: 1,
					pageSize: 100
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					if(that.pageNum == 1){
						that.houseList=res.rows
					}else{
						res.rows.forEach((item,index) =>{
							that.houseList.push(item)
						})
					}
					if(res.rows.length == 0){
						that.nodata = true
					}else{
						that.nodata = false
					}
					that.houseList.forEach((item,index) =>{
						that.houseList[index].highLightArr = []
						if(item.highlights){
							let arr = item.highlights.split(",")
							for(let i=0;i<arr.length;i++){
								for(let j=0;j<that.highlightAll.length;j++){
									if(arr[i] == that.highlightAll[j].dictCode){
										that.houseList[index].highLightArr.push(that.highlightAll[j].dictLabel)
									}
								}
							}
						}
					})
					// 整租合租显示处理
					that.houseList.forEach((item,index) =>{
						that.houseList[index].addCopIdName = ''
						that.payArr.forEach((arrItem,arrIndex) =>{
							if(arrItem.dictCode == item.addCopId){
								that.houseList[index].addCopIdName = arrItem.dictLabel
							}
						}) 
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.no_data{
		font-size: 32rpx;
		color: #888888;
		text-align: center;
		margin-top: 30rpx;
		margin-bottom: 50rpx;
	}
	.content{
		width: 100%;
		background: #F5F5F5;
		min-height: 100vh;
		.tab_type{
			padding: 30rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			.tabs{
				font-size: 32rpx;
				display: inline-block;
				background: #EFEFEF;
				color: #979797;
				padding: 10rpx 20rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
			.selected{
				background: #56CC93;
				color: #FFFFFF;
			}
		}
		.tab_box{
			width: 100%;
			height: 80rpx;
			background: #ffffff;
			margin-bottom: 20rpx;
			.tab_box_style{
				width: 70%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 auto;
				.tab_box_inner{
					width: 100rpx;
					color: #333333;
					text-align: center;
					margin-top: 20rpx;
					padding-bottom: 10rpx;
				}
				.active{
					border-bottom: 4rpx solid #007AFF;
					color: #007AFF;
				}
			}
		}
		.hlist{
			width: 100%;
			margin: 0 auto;
			padding-bottom: 30rpx;
			background: #FFFFFF;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #ebebeb;
			.hlist_inner{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.hlist_btn{
				width: 100%;
				height: 80rpx;
				border-top: 1rpx solid #efefef;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-top: 20rpx;
				.hlist_btn_inner{
					width: 100rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					margin-right: 30rpx;
					border: 1rpx solid #C8C7CC;
					border-radius: 50rpx;
					font-size: 32rpx;
				}
			}
			.hlist_img{
				width: 200rpx;
				height: 165rpx;
				border-radius: 10rpx;
				margin-left: 20rpx;
				overflow: hidden;
				.hlist_img_inner{
					width: 200rpx;
				}
				.hlist_img_inner1{
					width: 200rpx;
					height: 165rpx;
					background: url('../../static/img/10.jpg');
					background-size: 100% 100%;
				}
			}
			.hlist_right{
				margin-left: 20rpx;
				width: calc(100% - 230rpx);
				.hlist_title{
					font-size: 32rpx;
					color: #333333;
					margin-top: 20rpx;
				}
				.hlist_position{
					font-size: 30rpx;
					color: #666666;
					margin-top: 10rpx;
				}
				.hlist_tag{
					width: 100%;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.hlist_tag_inner{
						padding: 5rpx 20rpx;
						font-size: 28rpx;
						color: #666666;
						border-radius: 10rpx;
						margin-right: 20rpx;
						margin-top: 10rpx;
						border: 1rpx solid #999999;
					}
				}
				.hlist_price{
					font-size: 32rpx;
					color: red;
					margin-top: 20rpx;
				}
			}
		}
		.posters{
			width: 100vw;
			height: 100%;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: 999999;
			.posters_layer{
				background: rgba(0,0,0,0.7);
				width: 100%;
				height: 100%;
				padding-top: 20rpx;
				border-radius: 10rpx;
				.canvas-box{
					width:350px;
					height:550px;
					margin: 0 auto;
					.canvas-inner{
						width:100%;
						height:100%;
						z-index: 9999;
						background: #FFFFFF;
						border-radius: 10rpx;
					}
				}
				.poster_btn{
					width: 350px;
					height: 100rpx;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;
					.poster_cancel{
						width: 270rpx;
						height: 88rpx;
						// border: 1rpx solid #FFFFFF;
						background: #FFFFFF;
						color: #0EBFDF;
						text-align: center;
						line-height: 88rpx;
						border-radius: 40rpx;
					}
					.sure_btn{
						background: #0EBFDF;
						border: none;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>
